<template>
    <div>
        <el-row>
            <el-col :span='9' class="pos-order" id="order-list">
                <el-tabs>
                    <el-tab-pane label="结账">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column label="商品" prop="goodsName" width="150"></el-table-column>
                            <el-table-column label="数量" prop="count" width="70"></el-table-column>
                            <el-table-column label="金额" prop="price" width="50"></el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                            <template slot-scope="scope">
                                <el-button size="small" @click="addOrderList(scope.row)">增加</el-button>
                                <el-button size="small" @click="deleteOneGood(scope.row)">删除</el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                        <div class="totalComput">
                            <small>数量：</small>{{totalCount}}个
                            <small>金额：</small>{{totalMoney}}元
                        </div>
                        <div class="btn">
                            <el-button type="success" @click="checkout">结账</el-button>
                            <el-button type="danger" @click="deleteAllGoods">删除</el-button>
                        </div>                        
                    </el-tab-pane>
                    <el-tab-pane label="外卖">
                        
                        <el-table :data="sellData" border style="width: 100%">
                            <el-table-column label="姓名" prop="name" width="100"></el-table-column>
                            <el-table-column label="商品" prop="thing" width="130"></el-table-column>
                            <el-table-column label="金额" prop="price" width="50"></el-table-column>
                            <el-table-column label="电话" prop="phone" width="130"></el-table-column>
                            <el-table-column label="操作" width="100" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="small" @click="onClick(scope.row, $event)">已完成</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span='15'>
                <div class="often-goods">
                    <div class="title">高频率商品</div> 
                    <div class="often-use">
                        <ul>
                            <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                                <span>{{goods.goodsName}}</span>
                                <span class="o-price">￥{{goods.price}}元</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="foods-type">
                    <el-tabs>
                        <el-tab-pane label="主食">
                            <ul>
                                <li v-for="goods in typeGoodsOne" @click="addOrderList(goods)"> 
                                    <span class="picture"><img src="goods.goodsImg" width="100%"/></span>
                                    <span class="foodname">{{goods.goodsName}}</span>
                                    <span class="foodprice">{{goods.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="小食">
                            <ul>
                                <li v-for="goods in typeGoodsTwo" @click="addOrderList(goods)">
                                    <span class="picture"><img src="goods.goodsImg" width="100%"/></span>
                                    <span class="foodname">{{goods.goodsName}}</span>
                                    <span class="foodprice">{{goods.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="饮料">
                            <ul>
                                <li v-for="goods in typeGoodsThree" @click="addOrderList(goods)">
                                    <span class="picture"><img src="goods.goodsImg" width="100%"/></span>
                                    <span class="foodname">{{goods.goodsName}}</span>
                                    <span class="foodprice">{{goods.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="套餐">
                            <ul>
                                <li v-for="goods in typeGoodsFour" @click="addOrderList(goods)">
                                    <span class="picture"><img src="goods.goodsImg" width="100%"/></span>
                                    <span class="foodname">{{goods.goodsName}}</span>
                                    <span class="foodprice">{{goods.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Pos',
  mounted: function(){
      var orderListHeight = document.body.clientHeight;
      document.getElementById('order-list').style.height = orderListHeight + 'px'
  },
  data() {
      return {
        tableData: [],
        oftenGoods:[],
        typeGoodsOne:[],
        typeGoodsTwo:[],
        typeGoodsThree:[],
        typeGoodsFour: [],   
        totalCount: 0,
        totalMoney: 0,
        sellData: [],
        // isShow: false
      }
  },
  created(){
      axios.get('https://www.fastmock.site/mock/0068562ce33e0e8d57d11171683282ea/pos/oftenGoods')
      .then((response)=>{
        //   console.log(response)
          this.oftenGoods = response.data.oftenGoods
        //   console.log(oftenGoods)
      })
      .catch((error)=>{
          console.log(error)
      })

      axios.get('https://www.fastmock.site/mock/0068562ce33e0e8d57d11171683282ea/pos/typeGoods')
      .then((response)=>{
        //   console.log(response)
          this.typeGoodsOne = response.data.data[0]
          this.typeGoodsTwo = response.data.data[1]
          this.typeGoodsThree = response.data.data[2]
          this.typeGoodsFour = response.data.data[3]
      })
      .catch((error)=>{
          console.log(error)
      })

      axios.get('https://www.fastmock.site/mock/0068562ce33e0e8d57d11171683282ea/pos/sellData')
      .then((response)=>{
        //   console.log(response)
          this.sellData = response.data.sellData
        //   console.log(oftenGoods)
      })
      .catch((error)=>{
          console.log(error)
      })
  },
  methods:{
      addOrderList:function(goods){
          this.totalCount = 0
          this.totalMoney = 0

          let isHave = false
          //判断是否这个商品已经存在于订单列表
          for(let i=0; i<this.tableData.length; i++){
              if(this.tableData[i].goodsId == goods.goodsId){
                  isHave = true
              }
          }
          //根据isHave的值判断订单列表中是否已经有此商品
          if(isHave){
            //存在就进行数量添加
            let arr = this.tableData.filter(o => o.goodsId == goods.goodsId)
            arr[0].count++
          }else{
            //不存在就推入数组
            let newGoods = {goodsId:goods.goodsId, goodsName:goods.goodsName, price:goods.price, count: 1}
            this.tableData.push(newGoods) 
          }
          this.reComute()
      },
      //删除单个商品
      deleteOneGood(goods){
          this.tableData = this.tableData.filter(o=> o.goodsId != goods.goodsId)
          this.reComute()
      },
      //删除全部商品
      deleteAllGoods(){
          this.tableData = []
          this.totalCount = 0
          this.totalMoney = 0
      },
      //结账
      checkout(){
          if(this.tableData != 0){
            this.tableData = []
            this.totalCount = 0
            this.totalMoney = 0

            this.$message({
                type: 'success',
                message: '结账成功，感谢您的光临！'
            })
          }else{
              this.$message.error('不能空结哦老板~')
          }
      },
      //重新计算总金额和总数量
      reComute(){
          this.totalCount = 0
          this.totalMoney = 0
          if(this.tableData){
              this.tableData.forEach((item)=>{
                this.totalCount += item.count
                this.totalMoney = this.totalMoney + (item.price * item.count)
            })
          }
      },
    //点击按钮禁用
    onClick(row, event){
        let target = event.target
        if(target.tagName.toLowerCase() === 'span'){
            target = target.parentNode  
        }
        target.disabled = true
        target.classList.add('btn-disabled')
    },
  }
}
</script>

<style>
.pos-order{
    background-color: lightgoldenrodyellow;
    border-right: 1px solid yellowgreen;
    /* height: 100%; */
}
.el-table .warning-row {
    background: oldlace;
}
.btn{
    margin: 20px 0px;
}
.title{
    background-color: lightgoldenrodyellow;
    text-align: left;
    border-bottom: 1px solid yellowgreen;
    padding: 10px;
}
.often-use ul li{
    list-style: none;
    float: left;
    border: 1px solid black;
    padding: 10px;
    margin: 5px;
    background-color: #fff;
    cursor: pointer;
}
.o-price{
    color: aqua;
}
.foods-type{
    clear:both;
}
.foods-type li{
    list-style: none;
    float: left;
    border: 1px solid aqua;
    height: auto;
    width: 23%;
    padding: 2px;
    margin: 2px;
    background-color: #fff;
    overflow: hidden;
    cursor: pointer;
}
.foods-type li span{
    display: block;
    float: left;
}
.picture{
    width: 40%;
}
.foodname{
    font-size: 18px;
    color: brown;
    padding-left: 10px;
}
.foodprice{
    padding-left: 10px;
    padding-top: 10px;
    font-size: 16px;
}
.totalComput{
    background-color: #fff;
    border-bottom: 1px solid yellowgreen;
    padding: 10px 0px;
}
.btn-disabled[disabled]{
    /* 不可点击 */
    pointer-events: none;
    color:#d6d4d4;    
    background: #fffbfb;
}
</style>